import React from 'react';


/*
    &&   逻辑且(与)       找假：运算符左边值找假，遇到假逻辑就中断了，左边就是结果；否则右边是结果
    ||   逻辑或           找真：运算符左边值找真，遇到真逻辑就中断了，左边就是结果；否则右边是结果

    console.log(true && false);
    console.log(false && true);
    console.log(1 && 2);
    console.log(0 && 2);
    console.log(true && 2);
    console.log(false && 2);
*/ 

// console.log(true || false);     // true
// console.log(false || true);     // true
// console.log(1 || 2);            // 1
// console.log(0 || 2);            // 2
// console.log(true || 2);         // true
// console.log(false || 2);        // 2

// 找真：运算符左边值找真，遇到真逻辑就中断了，左边就是结果；否则右边是结果
// console.log( undefined || false );    // false
// console.log( null || false );         // false
// console.log( false || undefined );    // undefined
// console.log( false || 0 );            // 0
// console.log( 0 || 1 );                // 1
// console.log( 1 || 0 );                // 1

// && 运算符级别高于 ||
// &&   逻辑且(与)    找假：运算符左边值找假，遇到假逻辑就中断了，左边就是结果；否则右边是结果
// ||   逻辑或        找真：运算符左边值找真，遇到真逻辑就中断了，左边就是结果；否则右边是结果
// console.log(  1 && 2 || 3 && 4 || 5 && 6 || 7  );
// 1 && 2 结果是 2，再往后，就是 || 遇到真就中断了，2 就是结果，后面全部不用看了。


// JSX - 条件渲染 - 短路运算(逻辑中断) 或 三元表达式

const foodList = <div>食物列表展示</div>;

// 布尔值
const bl = true;

function App() {
  return (
    <div className="App">
      {/* 三元表达式 */}
      {/* 三元表达式必须有两个分支，如果第二个分支不想要，也要预留空字符串 */}
      { bl ? foodList : ''  }

      {/* 条件渲染 */}
      {/* 短路 && 条件渲染，如果是 false ，就直接不显示 */}
      { bl && foodList }
    </div>
  );
}
export default App;
